<template>
	<view class="orderListOuter">

		<!-- 导航列表 -->
		<view class="navList">
			<view v-for="item in navList" :key="item.id" :class="`navList_item ${navItem ===item.id?'active':''}`"
				@click="navBtn(item)">
				{{item.title}}
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="orderList" v-if="orderList.list.length !== 0">
			<view class="orderList_item" v-for="(item,index) in orderList.list" :key="index"
				@click="orderDetail(item.order_id)">
				<view class="orderList_item_top">
					<text>订单编号：{{item.order_id}}</text>
					<text v-if="item.pay_status === 2 && item.status ===1">待发货</text>
					<text v-if="item.pay_status===1 && item.status===1">待付款</text>
					<text v-if="item.pay_status === 1 && item.status ===3">取消</text>

				</view>
				<view class="orderList_item_list" v-for="(ele ,index) in item.items" :key="ele.id">
					<view class="orderList_item_list_l">
						<image :src="ele.image_url" mode=""></image>
					</view>
					<view class="orderList_item_list_c">
						<view>{{ele.name}}</view>
						<view>{{ele.addon}}</view>
					</view>
					<view class="orderList_item_list_r">
						<view>￥{{ele.price}}</view>
						<view>x {{ele.nums}}</view>
					</view>
				</view>
				<view class="orderList_item_hj">
					合计<text>￥ {{item.order_amount}}</text>共<text>{{item.items.length}}</text>件
				</view>
				<view class="orderList_item_footer">
					<view class="orderList_item_ckxq">
						查看详情
					</view>
					<view class="orderList_item_ljzf" v-if="item.pay_status===1 && item.status===1" @tap.stop="payNow(item)">
						<text>立即支付</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="kong" v-if="orderList.list.length === 0">
			<image src="../../static/images/kongdz.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		serviceApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				isKong: false, // 数据是否为空
				navList: [ // 导航列表数据
					{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '待付款'
					},
					{
						id: 2,
						title: '待发货'
					},
					{
						id: 3,
						title: '已发货'
					},
					{
						id: 4,
						title: '待评价'
					},
				],
				navItem: 0,
				orderList: {},
				index: 1,
				status: 0
			};
		},
		onLoad(options) {
			this.navItem = parseInt(options.index)
		},
		onShow() {
			this.getOrderList(this.navItem)
		},
		methods: {
			// 导航按钮点击事件
			navBtn(data) {
				this.navItem = data.id
				this.getOrderList(data.id)
			},

			// 获取订单列表
			async getOrderList(status) {
				this.status = status
				const {
					data: res
				} = await serviceApi({
					limit: 5,
					method: "order.getorderlist",
					page: 1,
					status,
					token: uni.getStorageSync('token')
				})
				this.orderList = res.data
			},

			// 订单详情
			orderDetail(data) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?order_id=' + data
				})
			},

			// 立即支付
			payNow(data) {
				uni.navigateTo({
					url: `/pages/pay/pay?ids=${data.order_id}&type=${data.order_type}`
				})
			},
		},
		// 滚动事件
		async onReachBottom() {
			const {
				data: res
			} = await serviceApi({
				limit: 5,
				method: "order.getorderlist",
				page: this.index + 1,
				status: this.status,
				token: uni.getStorageSync('token')
			})

			const that = this
			that.index += 1
			res.data.list.forEach(item => {

				that.orderList.list.push(item)

			})
		},
	}
</script>

<style lang="scss" scoped>
	.orderListOuter {
		position: relative;
		padding-top: 20px;

		.kong {
			height: 89vh;
			background-color: #f8f8f8;

			image {
				width: 220px;
				height: 200px;
				position: absolute;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
			}
		}

		.navList {
			width: 100%;
			height: 28px;
			display: flex;
			align-items: center;
			position: fixed;
			top: 44px;
			background-color: #fff;
			z-index: 9;


			.navList_item {
				width: 20%;
				text-align: center;
				padding-bottom: 6px;
				border-bottom: 2px solid #fff;
			}

			.active {
				border-bottom-color: #000;
			}
		}

		.orderList {
			// height: 87.5vh;
			background-color: #f8f8f8;
			margin-top: 10px;
			overflow-y: scroll;

			.orderList_item {
				background-color: #fff;
				padding: 10px;
				position: relative;
				margin-bottom: 10px;

				.orderList_item_top {
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 10px;
					border-bottom: 1px solid #ececec;
					margin-bottom: 10px;

					&>text {
						&:first-child {
							color: #595959;
						}
					}
				}

				.orderList_item_list {
					display: flex;
					align-items: flex-start;
					margin-bottom: 10px;


					.orderList_item_list_l {
						width: 70px;
						height: 70px;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.orderList_item_list_c {
						width: 54%;
						font-size: 14px;
						margin-left: 10px;


						&>view {
							&:first-child {
								overflow-wrap: anywhere;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							&:last-child {
								font-size: 12px;
								color: #909090;
								margin-top: 3px;
							}
						}
					}

					.orderList_item_list_r {
						font-size: 14px;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-end;

						&>view {
							&:first-child {
								margin-bottom: 20px;
							}

							&:last-child {
								color: #909090;
							}
						}
					}
				}

				.orderList_item_hj {
					font-size: 12px;
					margin-top: 20px;
					color: #909090;
					margin-bottom: 40px;

					&>text {
						margin: 0 3px;

						&:first-child {
							color: #ff0000;
						}
					}
				}

				.orderList_item_footer {
					font-size: 12px;
					position: absolute;
					right: 20px;
					bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.orderList_item_ckxq {
						width: 70px;
						font-size: 12px;
						border: 1px solid #909090;
						text-align: center;
						padding: 3px 0;
						color: #909090;
						margin-right: 10px
					}

					.orderList_item_ljzf {
						width: 70px;
						font-size: 12px;
						border: 1px solid #000000;
						text-align: center;
						padding: 3px 0;
						color: #000000;
					}
				}
			}
		}
	}
</style>